<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>个人信息</title>
    <script src="../js/mui.min.js"></script>
    <script>
        mui.init({
            keyEventBind:{
                backbutton:true
            }
        });

    </script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>

    <link rel="stylesheet" href="../css/css/public.css">
    <link rel="stylesheet" href="../css/css/personal.css">
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/css/LCalendar.css">
    <script src="../js/LCalendar.js"></script>
    <style>
        .start_date_right{
            width: 8rem;
        }
        .start_date_left{
            line-height: 2.5rem;
        }
        .select_start_date{
            display: flex;
            justify-content: space-between;
        }
        .start_date_right input {
            width: 90%;
            border: none;
           	margin-bottom: -1%;
            text-align: right;
            
        }
        .shengri{
            padding: 2px 15px;
        }


        /*#div{*/
            /*width: 20%;*/
            /*background-color: rgb(255, 255, 238);*/
            /*border-color: rgb(0, 0, 0);*/
            /*border-style: solid;*/
            /*border-width: 1px;*/
            /*position: absolute;*/
            /*z-index: 100;*/
            /*right: 12%;*/
        /*}*/
        input[type="text"]{
            width: 100%;
            float: right;
            margin-right: 2%;
            border: none;
            color: #ccc;
        }
        .xingbie{
            padding: 0 15px;
            line-height: 3rem;
            height: 50px;
        }
        .xingbie2{
            font-size: 14px;
            height: auto;
            margin-top: 1px;
            border: 0 !important;
            background-color: #fff;
            z-index: 11;
            padding: 0 5px;
            margin-bottom: 0;
        }
    </style>
</head>
<body id="personal-con">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">个人信息</h1>
</header>
<div class="mui-content">
    <div id="account" class="mui-page">

        <div class="mui-page-content">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                	<ul class="mui-table-view">
                    	<li class="mui-table-view-cell">
                            <a id="head" class="mui-navigate-right">头像
                                <span class="mui-pull-right head">
									<img class="head-img mui-action-preview" id="head-img1" src=""/>
								</span>
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a  class="mui-navigate-right">昵称<span contenteditable="true"  class="mui-pull-right">乐裳购物</span></a>
                        </li>
                        <li class="mui-table-view-cell xingbie ">
                            <div id="div"
                                 style="width:20%;display:none;background-color:#ffffee;boder-collapse:collapse;border-color:#000000;border-style:solid;border-width:1px;position:absolute;z-index:100;right: 12%;">
                                <select class="xingbie2" id="selSex">
                                    <option  value="男">男</option>
                                    <option  value="女">女</option>
                                </select>


                                <input  style=" position: absolute;right: -55%;padding: 3px;top: 20%"  id="btnOk" type="button" value="确定">
                            </div>
                            性别：
                            <input style="width: 15%" class="xingbie" type = "text" name = "userSex2" readOnly onfocus="loadSmallWindow2(this)">


								<!--<a   class="mui-navigate-right">性别<span id='userResult' class="mui-pull-right"></span></a>-->
						</li>
                        <li class="mui-table-view-cell">
                            <a class="">用户ID<span class="mui-pull-right">123456</span></a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a id="lxfs" class="mui-navigate-right">联系方式<span contenteditable="true" class="mui-pull-right">18601234567</span></a>
                        </li>
                        <li class="mui-table-view-cell shengri">
                            <div class="select_start_date">
                                <div class="start_date_left">
                                    生日设置
                                </div>
                                <div class="start_date_right ">
                                    <input  type="text" placeholder="1996-05-03" name="start_date" id="start_date"  readonly="readonly" />
                                </div>
                            </div>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">收货地址<span class="mui-pull-right"></span></a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">账号安全<span class="mui-pull-right"></span></a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function loadSmallWindow2(obj)
    {
        var div = document.getElementById("div");
        div.style.display = "";
        div.style.top = obj.offsetTop + obj.clientHeight;
        div.style.left= obj.offsetLeft;
        document.getElementById("btnOk").onclick = function(){
            onSelectSex(obj,div);
        };
    }




    function onSelectSex(obj,divObj)
    {

        var sel = document.getElementById("selSex");
        obj.value = sel.value;
        divObj.style.display = "none";
    }
</script>
<script type="text/javascript">

   	var calendar = new LCalendar();
    calendar.init({
        'trigger': '#start_date', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': (new Date().getFullYear()-50) + '-' + 1 + '-' + 1, //最小日期
        'maxDate': (new Date().getFullYear()+50) + '-' + 12 + '-' + 31 //最大日期
    });
   
//    		$(function() { 
//    			$('#start_date').date();
//    			$('#end_date').date();
//    		});
</script>
<script type="text/javascript">

	

    /*点击头像触发*/
    document.getElementById('head').addEventListener('tap', function() {
        if(mui.os.plus) {
            var a = [{
                title: "拍照"
            }, {
                title: "从手机相册选择"
            }];
            plus.nativeUI.actionSheet({
                title: "修改用户头像",
                cancel: "取消",
                buttons: a
            }, function(b) { /*actionSheet 按钮点击事件*/
                switch(b.index) {
                    case 0:
                        break;
                    case 1:
                        getImage(); /*拍照*/
                        break;
                    case 2:
                        galleryImg(); /*打开相册*/
                        break;
                    default:
                        break;
                }
            })
        }
    }, false);
    //拍照
    function getImage() {
        var cmr = plus.camera.getCamera();
        var res = cmr.supportedImageResolutions[0];
        var fmt = cmr.supportedImageFormats[0];
        cmr.captureImage(function(path) {
            //plus.io.resolveLocalFileSystemURL(path, function(entry) {
            plus.io.resolveLocalFileSystemURL(path, function(entry) {
                var localUrl = entry.toLocalURL();
                uploadHead(localUrl + "?version=" + new Date().getTime());
            }, function(err) {
                console.error("拍照失败：" + err.message);
            }, {
                index: 1
            });
        });
    }
    //本地相册选择
    function galleryImg() {
        plus.gallery.pick(function(a) {
            plus.io.resolveLocalFileSystemURL(a, function(entry) {
                plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
                    root.getFile("logo.png", {}, function(file) {
                        //文件已存在
                        file.remove(function() {
                            console.log("file remove success");
                            entry.copyTo(root, 'logo.png', function(e) {
                                var e = e.fullPath + "?version=" + new Date().getTime();
                                uploadHead(e); /*上传图片*/
                                //变更大图预览的src
                                //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
                            },function(e) {
                                console.log('copy image fail:' + e.message);
                            });
                        }, function() {
                            console.log("delete image fail:" + e.message);
                        });
                    }, function() {
                        //文件不存在
                        entry.copyTo(root, 'logo.png', function(e) {
                            var path = e.fullPath + "?version=" + new Date().getTime();
                            uploadHead(path); /*上传图片*/
                        },function(e) {
                            console.log('copy image fail:' + e.message);
                        });
                    });
                }, function(e) {
                    console.log("get _www folder fail");
                })
            }, function(e) {
                console.log("读取拍照文件错误：" + e.message);
            });
        }, function(a) {}, {
            filter: "image"
        })
    };

    //上传头像图片
    function uploadHead(imgPath) {
        var image = new Image();
        image.src = imgPath;
        image.onload = function() {
            var imgData = getBase64Image(image);
            console.log(imgData);
            /*在这里调用上传接口*/
			    mui.ajax("图片上传接口", {
			        data: {
			        img: imgData
			        },
			        dataType: 'json',
			        type: 'post',
			        timeout: 10000,
			        success: function(data) {
			        mui.toast('上传成功',{
			            duration:'long',
			            type:'div'
			        });
			                document.getElementById('head-img').src = imgPath;
			        document.getElementById('head-img1').src = imgPath;
			        document.getElementById('head-img2').src=imgPath;
			        },
			            error: function(xhr, type, errorThrown) {
			        mui.toast('网络异常，请稍后再试！');
			        }
			    });
        }
    }
    //将图片压缩转成base64
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        var width = img.width;
        var height = img.height;
        // calculate the width and height, constraining the proportions
        if(width > height) {
            if(width > 100) {
                height = Math.round(height *= 100 / width);
                width = 100;
            }
        } else {
            if(height > 100) {
                width = Math.round(width *= 100 / height);
                height = 100;
            }
        }
        canvas.width = width; /*设置新的图片的宽度*/
        canvas.height = height; /*设置新的图片的长度*/
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height); /*绘图*/
        var dataURL = canvas.toDataURL("image/png", 0.8);
        return dataURL.replace("data:image/png;base64,", "");
    }
</script>
</body>
</html>